<template>
  <div class="pages brandClass">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-form size="small">
          <el-form-item label label-width="0">
            <el-input clearable v-model="selectdata.keyword" placeholder="请输入商品名称或编号"></el-input>
          </el-form-item>
          <el-form-item label="是否提成" label-width="90px" v-if="isShop=='0'">
            <el-select v-model="isCommission" placeholder="请选择">
              <el-option v-for="(item,index) in commissionOption" :label="item.label" :value="item.value" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label label-width="15px">
            <el-button type="primary" @click="_handleSearch">查询</el-button>
            <el-button type="primary" @click="onSetCommission" v-if="isShop=='0'&& setRole('设置商品提成')">设置商品提成</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="tableMain">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" v-if="isShop=='0'"></el-table-column>
          <el-table-column align="center" prop="name" label="商品名称"></el-table-column>
          <el-table-column align="center" prop="goodsSalePrice" label="商品销售价"></el-table-column>
          <el-table-column align="center" prop="goodsMemberPrice" label="商品会员价"></el-table-column>
          <el-table-column align="center" prop="goodsUnitName" label="商品单位"></el-table-column>
          <el-table-column align="center" prop="goodsParameterList" label="规格型号" width="300">
            <template slot-scope="scope">
              <div v-for="(item, index) in  scope.row.goodsParameterList" :key="index">
                <span>{{item.paramName}} :</span>
                <span>{{item.paramValue}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否提成" v-if="isShop=='0'">
            <template slot-scope="scope">
                <span v-if="scope.row.commissionValue == 0">否</span>
                <span v-else>是</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="barCode" label="提成比例/金额" v-if="isShop=='0'">
          <template slot-scope="scope">
            <span v-if="scope.row.commissionValue != 0">
                  {{scope.row.commissionValue}}
                <span v-if="scope.row.commissionWay == 0">%</span>
                <span v-else>元</span>
            </span>
            <span v-if="scope.row.commissionValue == 0">
             --
            </span>
           
            </template>
          </el-table-column>
          <el-table-column align="center" prop="barCode" label="商品条形码" ></el-table-column>
          <el-table-column align="center" prop="goodsCode" label="商品货号"></el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="零售状态"
            width="100"
            :formatter="states"
          ></el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                size="small"
                v-if="setRole('查看详情')"
                type="text"
                @click="_handleCheck(scope.row.id, scope.row.isEdit)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <page-unit :pageData="pageData" :func="getGoodsPosListByPage"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
    <el-dialog title="设置商品提成" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm"  label-width="100px" size="mini">
        <el-form-item label="是否提成">
          <el-radio-group v-model="dialogForm.isCommission">
            <el-radio label="1" >是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择提成方式" v-if="dialogForm.isCommission ==1">
          <el-select v-model="dialogForm.commissionType">
            <el-option label="比例提成" value="0"></el-option>
            <el-option label="固定提成" value="1"></el-option>
          </el-select>
          <el-input v-model="dialogForm.number" @keyup.native="dialogForm.number = util.replaceNumber(dialogForm.number)"></el-input>
          <span v-if="dialogForm.commissionType == 0">%</span>
          <span v-else>元</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="samll">取 消</el-button>
        <el-button type="primary" @click="onConfirmSet" size="samll">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from "@/util";
import pageUnit from "@/components/Page";
import { mapState } from "vuex";
import state from "@/util/state";
import { getGoodsPosListByPage,updateGoodsDeduct } from "@/api";
export default {
  components: { pageUnit },
  computed: mapState(["sub", "power", "merchantId","isShop"]),
  data() {
    return {
      util: util,
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      selectdata: {
        keyword: ""
      },
      tableData: [],
      states: state.retailStatus,
      isCommission: null,
      selectGoods: [],
      dialogFormVisible: false,
      dialogForm: {
        isCommission: '1',
        commissionType: '1',
        number: ''
      },
      commissionOption: [
        {
          label: '全部',
          value:  null
        },
         {
          label: '是',
          value:  0
        },
         {
          label: '否',
          value:  1
        }
      ]
    };
  },
  created() {

  },
  mounted() {
    this.getGoodsPosListByPage(20, 1); // 获取表格数据
  },
  methods: {
    // Commission: state.isCommission,
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    getGoodsPosListByPage(pageSize, pageNum) {

      let data = {
        name: this.selectdata.keyword,
        pageSize: pageSize,
        pageNo: pageNum,
        shopId: this.merchantId,
        filter: this.isCommission
      };
      getGoodsPosListByPage(data).then(res => {
        this.pageData.totalItems = res.data.total;
        this.tableData = res.data.list;
      });
    },
    // 查询
    _handleSearch() {
      this.getGoodsPosListByPage(this.pageData.pageSize, 1);
    },
    // 查看
    _handleCheck(id, isEdit) {
      util.routerTo(
        "/operate-management/goods-management/goods-reportTempListPos/goods-reportPriceDetailPos",
        {
          id: id
        }
      );
    },
    //  设置商品提成
    onSetCommission() {
      if (this.selectGoods.length == 0) {
        this.$message.error("请勾选需要设置提成的商品");
      } else {
        this.dialogFormVisible = true;
      }
    },
    // 全选
    handleSelectionChange(row) {
      this.selectGoods = row;
    },
    onConfirmSet() {
      if (this.dialogForm.isCommission == '1' && (!this.dialogForm.number || this.dialogForm.number == 0)) {
        this.$message.error('请输入提成值且大于0！')
        return
      }
      let ids = [],
          data = {};

      for (let i = 0; i < this.selectGoods.length; i++) {
        let element = this.selectGoods[i];
        ids.push(element.goodsShopId);
      }
      data = {
        goodsIds: ids.join(","),
        commissionWay: this.dialogForm.commissionType,
        commissionValue: this.dialogForm.number,
        shopId: this.merchantId
      };
        if(this.dialogForm.isCommission == 0) {
        data.commissionValue = 0;
      }
      updateGoodsDeduct(data).then(res => {
        if(res.code == 200) {
          this.dialogFormVisible = false;
           this.getGoodsPosListByPage(this.pageData.pageSize, 1);
        }
      });
    }
  }
};
</script>
<style lang="" scoped>
   .el-dialog .el-input {
     width: 100px;
   }
</style>

